import { Avatar, Button, Dropdown, Layout } from "antd";
import GlobalMenu from "../menu";

import logo from "./assets/logo.png";
import defualtAvatar from "./assets/unknown.png";
import { useNavigate } from "react-router-dom";
import { logout } from "@/api/common";
import { removeToken } from "@/utils";
import { useAppSelector } from "@/store";
import { selectUserInfo } from "@/store/slice/app";

const { Header } = Layout;

function LayoutHeader() {
  const navigate = useNavigate();
  const user_info = useAppSelector(selectUserInfo);
  function handlerLogout() {
    logout().then(() => {
      removeToken();
      navigate("/login");
    });
  }
  return (
    <Header style={{ display: "flex", alignItems: "center" }}>
      <div className="layout-header-left">
        <Avatar src={<img src={logo} alt="avatar" />} />
        <div className="layout-logo-title">后台管理系统</div>
      </div>
      <GlobalMenu />
      <div >
        <Dropdown
          placement="bottomRight"
          arrow
          menu={{
            items: [
              {
                key: "user",
                label: (
                  <Button
                    style={{ color: "unset" }}
                    type="link"
                    onClick={() => navigate("/person_info")}
                  >
                    个人中心
                  </Button>
                ),
              },
              {
                key: "logout",
                label: (
                  <Button
                    style={{ color: "unset" }}
                    type="link"
                    onClick={handlerLogout}
                  >
                    退出登录
                  </Button>
                ),
              },
            ],
          }}
        >
          <div className="layout-header-user">
            <Avatar
              className="avatar"
              size={44}
              src={<img src={defualtAvatar} alt="avatar" />}
              draggable={false}
            />
            <div className="user-info">{user_info.realName}</div>
          </div>
        </Dropdown>
      </div>
    </Header>
  );
}

export default LayoutHeader;
